import React from 'react'
import Admin from "../../../layout/Admin";
import VipRoomModel from "../../../model/vip-room";
import {Button, Form, Input, InputNumber, Modal, Popconfirm, Popover, Radio, Table} from "antd";
import moment from "moment";
import Info from "../../../service/info";
import {formLayout, formTailLayout} from "../vote/vote";


const log = console.log.bind(console)

class VipRoom extends React.Component {
    constructor(props) {
        super(props)
        this.model = new VipRoomModel()
        this.columns = [
            // Boxid: "3559986*355"
            {
                title: '包厢Id',
                dataIndex: 'Boxid',
            },
            // Boxtype: 2
            {
                title: '包厢类型',
                dataIndex: 'Boxtype',
                render: (type) => ['普通包厢', '公共包厢', '官方包厢'][type]
            ,
            },
            // Createt: 1623898802
            {
                title: '创建时间',
                dataIndex: 'Createt',
                render: (time) => moment(new Date(time * 1000)).format('YYYY-MM-DD HH:mm:ss')
            },
            // Historyjoin: (3) ["bbfc6af2-8d0a-4394-b068-8cc3377d0b86", "58d223d1-03ed-4176-bf07-56bab4b5729e", "190969cb-a7f9-4ff6-992c-2b1a934dc071"]
            // Name: "热投-官方"
            {
                title: '包厢名',
                dataIndex: 'Name',
            },
            // Namiid: 3559986
            {
                title: '纳米Id',
                dataIndex: 'Namiid',
            },
            // Notice: ""
            {
                title: '公告',
                dataIndex: 'Notice',
            },
            // Paytype: 0
            {
                title: '支付类型',
                dataIndex: 'Paytype',
                render: (type) => type === 1 ? '金币' : '应豆'
            },
            // Payvalue: 0
            {
                title: '支付总额',
                dataIndex: 'Payvalue',
            },
            // Pwd: ""
            {
                title: '密码',
                dataIndex: 'Pwd',
            },
            // State: 1
            {
                title: '状态',
                dataIndex: 'State',
                render: (state) => state === 1 ? '正常' : '关闭'
            },
            // Type1: 0
            // Type2: 0
            // Uid: "gf"
            // Url: ""
            {
                title: '视频源地址',
                dataIndex: 'Url',
            },
            // Usercount: 3
            {
                title: '加入人数',
                dataIndex: 'Usercount',
            },
            {
                title: '参与用户',
                dataIndex: 'Joinusers',
                render: (users, record) => {

                    const content = users.map((user, index) => <div key={index}>
                        <span>{user.Nickname} </span>

                        <Popconfirm title={'确认踢出？'} onConfirm={() => this.kickOut(user, record)}>
                            <a>踢</a>
                        </Popconfirm>

                    </div>)

                    return <Popover
                        content={content}
                        trigger={'click'}
                    >
                        <a>查看</a>

                    </Popover>
                }

            },
            // Votecount: 0
            {
                title: '投票数',
                dataIndex: 'Votecount',
            },
            // Weight: 1
            {
                title: '权重',
                dataIndex: 'Weight',
            },
            {
                title: '操作',
                render: (record) => {
                    return <div className='action-links'>
                        <Popconfirm title={'确认删除？'} onConfirm={() => this.delete(record)} >

                            <a>删除</a>
                        </Popconfirm>
                        <a onClick={() => this.callEdit(record)}>编辑</a>
                    </div>
                }

            }
        ]
        this.state = {
            list: [],
            editValue: null,
            modal: {
                add: false,
            }
        }
    }

    componentDidMount() {
        this.all()
    }

    all = () => {
        this.model
            .all()
            .then(res => {
                const data = res.data
                if (data.ok) {
                    log(data.res)
                    this.setState({
                        list: data.res,
                    })
                }
            })
    }

    delete = (record) => {
        log('del', record)
        this.model
            .delete({
                Boxid: record.Boxid,
            })
            .then(res => {
                const data = res.data
                if (data.ok) {
                    Info.success('删除成功')
                    this.all()
                }
            })
    }

    kickOut = (user, record) => {
        log('kickOut', user, 'from', record)
        this.model
            .kickOut({
                Uid: user.Id,
                Boxid: record.Boxid,
            })
            .then(res => {
                const data = res.data
                if (data.ok) {
                    Info.success('踢出包厢成功')
                    this.all()
                }
            })
    }

    callModal(key) {
        this.setState({
            ...this.state,
            modal: {
                ...this.state.modal,
                [key]: true,
            }
        })
    }

    cancelModal(key) {
        this.setState({
            ...this.state,
            modal: {
                ...this.state.modal,
                [key]: false
            }
        })
    }


    onAdd = () => {
        this.callModal('add')
    }

    onAddFormCancel = () => {
        this.cancelModal('add')
        this.addForm && this.addForm.resetFields()
    }

    onAddFinish = (values) => {
        log('add', values)
        log(this.state.editValue)
        let action = 'add'
        if (this.state.editValue) {
            log('set')
            action = 'set'
            values = {
                ...values,
                Boxid: this.state.editValue.Boxid,
            }
        }
        this.model
            [action](values)
            .then(res => {
                const data = res.data
                log(data)
                if (data.ok) {
                    Info.success('添加成功')
                    this.addForm && this.addForm.resetFields()
                    this.cancelModal('add')
                    this.all()
                }
            })
    }

    callEdit = (values) => {
        this.callModal('add')
        this.setState({
            editValue: values,
        }, () => {log(this.state.editValue)})

        setTimeout(() => this.addForm && this.addForm.setFieldsValue({...values}), 0)
    }

    render() {
        return (
            <>
                <Modal
                    visible={this.state.modal.add}
                    onCancel={() => this.onAddFormCancel()}
                    footer={null}
                    title='添加包厢'
                    width='80%'
                >

                    <Form
                        {...formLayout}
                        name='add'
                        ref={el => this.addForm = el}
                        onFinish={this.onAddFinish}
                        initialValues={{
                            Paytype:  0, //0=免费，1=金币，2=应豆
                        }}
                    >
                        <Form.Item
                            label='包厢名'
                            name='Name'
                            rules={[
                                {
                                    required: true,
                                    message: '请输入包厢名',
                                },
                            ]}
                        >
                            <Input
                                placeholder='请输入包厢名'
                            />
                        </Form.Item>
                        <Form.Item
                            label='公告'
                            name='Notice'
                            rules={[
                                {
                                    required: true,
                                    message: '请输入公告',
                                },
                            ]}
                        >
                            <Input
                                placeholder='请输入公告'
                            />
                        </Form.Item>

                        <Form.Item
                            name="Paytype"
                            label="支付类型"
                        >
                            <Radio.Group>
                                <Radio value={0}>免费</Radio>
                                <Radio value={1}>金币</Radio>
                                <Radio value={2}>应豆</Radio>
                            </Radio.Group>
                        </Form.Item>

                        <Form.Item
                            name="Namiid"
                            label="纳米ID"
                        >
                            <InputNumber />
                        </Form.Item>

                        <Form.Item
                            name="Payvalue"
                            label="额度"
                        >
                            <InputNumber />
                        </Form.Item>
                        <Form.Item
                            name="Weight"
                            label="权重"
                        >
                            <InputNumber />
                        </Form.Item>
                        <Form.Item {...formTailLayout}>

                            <Button type="primary" htmlType="submit">
                                Submit
                            </Button>

                        </Form.Item>
                    </Form>

                </Modal>
                <Admin>

                    <div className='list-container'>
                        <div style={{margin: '8px'}}>
                            <Button
                                onClick={this.onAdd}
                            >
                                添加包厢
                            </Button>
                        </div>
                        <Table
                            dataSource={this.state.list}
                            columns={this.columns}
                            rowKey={(record, index) => index}
                        />
                    </div>
                </Admin>
            </>
        )
    }
}

export default VipRoom